<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>美拍视频展示</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://vjs.zencdn.net/5.14.1/video-js.css">
    <!-- If you'd like to support IE8 -->
    <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    <style type="text/css">
.thumbnail{
    height:260px;
}
.video-js{
    width:100%;
    /*height:100%;*/
}
        </style>
</head>

<body>
    <div class="container">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">美拍视频</h3>
            </div>
            <div class="panel-body">
                <!-- 左侧导航 -->
                <div class="col-md-2" id="navList">
                </div>
                <!-- 右侧内容区域 -->
                <div class="col-md-10">
                    <div class="input-group">
                        <input type="text" id="txtSearch" placeholder="请输入查询关键字" class="form-control">
                        <span class="input-group-btn">
                                <button id="btnSearch" class="btn btn-default" type="button">Go!</button>
                            </span>
                    </div>
                    <div id="contentContainer">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--<a class="btn btn-primary" data-toggle="modal" href='#modal-id'>Trigger modal</a>-->
    <div class="modal fade" id="modalVideo">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="videoTitle">Modal title</h4>
                </div>
                <div class="modal-body">
                    <video id="video" class="video-js" controls preload="auto" width="300px" height="500px" data-setup="{}">
                        <!--<source src="{{$value.video}}" type='video/mp4'>-->
                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a web browser that
                            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                        </p>
                    </video>
                </div>
            </div>
        </div>
    </div>

    <script id="tplNav" type="text/html">
{{each types}}
        <div class="list-group">
            <a href="#" data-tid="{{$value.id}}" class="list-group-item">{{$value.name}}</a>
        </div>
        {{/each}}
        </script>
<script id="tplContentList" type="text/html">
{{each listData}}
        <div class = "col-xs-6 col-sm-4 col-md-3 col-lg-3">
             <a href="#" data-video="{{$value.video}}" data-title="{{$value.title}}" class="btnVideo">
                <div class="thumbnail">
                <img class="lazy" data-original="{{$value.img}}" alt="">
                <div class="caption">
                <p>{{$value.title}}</p>
                </div>
                </div>
             </a>
        </div>
        {{/each}}
        </script>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<script src="http://cdn.bootcss.com/masonry/4.1.1/masonry.pkgd.min.js"></script>
<script src="lib/template.js"></script>
<script src="http://vjs.zencdn.net/5.14.1/video.js"></script>
<script src="js/v.js"></script>
</body>

</html>